ScLibs.ui.Carousel = ScLibs.extend(ScLibs.Observer, {
	evt: (function(){
		var e = {
			start: "mousedown",
			move: "mousemove",
			end: "mouseup"
		};
		if('ontouchstart' in window){
			e = {
				start: "touchstart",
				move: "touchmove",
				end: "touchend"
			};
		}
		return e;
	}()),
	initialize: function(el, config){
		this.config = {
			direction: 'y',
			activeIndex: 0,
			duration: 200,
			autoRender: true
		};

		this.config = $.extend(this.config, config);
		var listener = { };
		if(this.config.listener){
			listener = this.config.listener;
		}
		ScLibs.ui.Carousel.base.initialize.call(this, this.listener);

		this.el = el;
		this.endPos = 0;
		this.activeIndex = this.config.activeIndex;
		if(this.config.autoRender){
			this.render();
		}
	},
	render: function(){
		this.el.addClass("ui-carousel");
		
		this.body = this.el.children().addClass("ui-carousel-body");
		if(this.config.direction === 'x'){
			this.body.addClass('ui-carousel-horizontal');
		}
		else{
			this.body.addClass('ui-carousel-vertical');
		}
		
		var views = this.body.children("div").addClass("ui-carousel-items"),
			activeIndex = this.activeIndex,
			style = this.body.get(0).style,
			pos = 0, 
			itemSize = 0;

		if(this.config.direction === 'x'){
			itemSize = this.el.width();
			pos = (-1 * activeIndex) * itemSize;

			style.webkitTransform = 'translateX(' + (pos) + 'px)';
			style.msTransform = 'translateX(' + (pos) + 'px)';
			style.transform = 'translateX(' + (pos) + 'px)';
		}
		else{
			itemSize = this.el.height();
			pos = (-1 * activeIndex) * itemSize;

			style.webkitTransform = 'translateY(' + (pos) + 'px)';
			style.msTransform = 'translateY(' + (pos) + 'px)';
			style.transform = 'translateY(' + (pos) + 'px)';
		}

		this.size = itemSize;

		this.body.on(this.evt.start, $.proxy(this.onStart, this));
	},
	onStart: function(e){
		var pageX = e.originalEvent.touches ? 
			e.originalEvent.touches[0].pageX : e.originalEvent.pageX,
		
		pageY = e.originalEvent.touches ? 
		e.originalEvent.touches[0].pageY : e.originalEvent.pageY;

		this.startPageX = pageX;
		this.startPageY = pageY;
		this.dragging = true;

		this.body.on(this.evt.move, $.proxy(this.onMove, this));
		this.body.on(this.evt.end, $.proxy(this.onEnd, this));
	},
	onMove: function(e){
		if(this.dragging){
			var pageX = e.originalEvent.touches ? 
				e.originalEvent.touches[0].pageX : e.originalEvent.pageX;

			var pageY = e.originalEvent.touches ? 
				e.originalEvent.touches[0].pageY : e.originalEvent.pageY;

			var style = this.body.get(0).style;
			style.webkitTransitionDuration = "0";
			
			if(this.config.direction === 'x'){
				this.movePos  = (pageX - this.startPageX) + (-1 * this.activeIndex) * this.size;
				this.moveLimit = Math.abs(pageX - this.startPageX);

				style.webkitTransform = 'translateX(' + this.movePos + 'px)';
				style.msTransform = 'translateX(' + this.movePos + 'px)';
				style.transform = 'translateX(' + this.movePos + 'px)';
			}
			else{
				this.movePos  = (pageY - this.startPageY) + (-1 * this.activeIndex) * this.size;
				this.moveLimit = Math.abs(pageY - this.startPageY);

				style.webkitTransform = 'translateY(' + this.movePos + 'px)';
				style.msTransform = 'translateY(' + this.movePos + 'px)';
				style.transform = 'translateY(' + this.movePos + 'px)';
			}
		}

		return false;
	},
	onEnd: function(){
		debugger;
		var endPos = 0,
			style = this.body.get(0).style;

		if(this.moveLimit > 30){
			if(this.movePos > 0){
				this.activeIndex = 0;
			}
			else{
				if(Math.abs(this.movePos) > Math.abs(this.endPos)){
					this.activeIndex++;
					if(this.activeIndex >= (this.body.children("div").length - 1)){
						this.activeIndex = this.body.children("div").length - 1;
					}
				}
				else{
					this.activeIndex--;
				}
			}

			if(this.activeIndex === 0){
				endPos = 0;
			}
			else if(this.activeIndex > 0){
				if(this.config.direction === 'x'){
					endPos = (this.el.width() * this.activeIndex) * -1;
				}
				else{
					endPos = (this.el.height() * this.activeIndex) * -1;
				}
			}
			this.endPos = endPos;
		}
		else{
			endPos = this.endPos;
		}

		style.webkitTransitionDuration = this.config.duration + 'ms';
		if(this.config.direction === 'x'){
			style.webkitTransform = 'translateX(' + endPos + 'px)';
			style.msTransform = 'translateX(' + endPos + 'px)';
			style.transform = 'translateX(' + endPos + 'px)';
		}
		else{
			style.webkitTransform = 'translateY(' + endPos + 'px)';
			style.mozTransform = 'translateY(' + endPos + 'px)';
			style.transform = 'translateY(' + endPos + 'px)';
		}

		this.fireEvent(this, 'change', [this, this.getActiveIndex()]);

		this.body.off(this.evt.move, this.onMove);
		this.body.off(this.evt.end, this.onEnd);

		this.dragging = false;
	},
	getActiveIndex: function(){
		return this.activeIndex;
	},
	next: function(){
		
	},
	prev: function(){
		
	}
});







